<!--
  功能：这是角色页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月20日 14:34:19
-->
<template>
  <div>
    <a-row :gutter="16">
      <a-col :span="4">
        <dept-tree @check="checkTree"></dept-tree>
      </a-col>
      <a-col :span="20">
        <div class="search">
          <a-space>
            <a-input v-model:value="search.name" placeholder="名称检索" />
            <a-input v-model:value="search.account" placeholder="账号检索" />
            <a-button type="primary" @click="serch">
              <template #icon>
                <search-outlined />
              </template>
              检索
            </a-button>
          </a-space>
        </div>
        <div class="crud">
          <a-space>
            <a-button type="primary" @click="insert">
              <template #icon>
                <plus-outlined />
              </template>
              创建
            </a-button>
            <a-button type="primary" @click="update">
              <template #icon>
                <edit-outlined />
              </template>
              编辑
            </a-button>
            <a-button type="primary" danger @click="del">
              <template #icon>
                <delete-outlined />
              </template>
              删除
            </a-button>
          </a-space>
        </div>

        <a-table bordered rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" :row-selection="{ selectedRowKeys: form.selectedRowKeys, onChange: onSelectChange}"  :scroll="{ y: 600 }">
          <template #bodyCell="{ column,text, record }">
            <template v-if="column.key === 'name'">
              <template v-if="$isNewDataByTime(record.updateTime)">
                <alert-filled :style="{ color: '#eb2f96' }" /> <span :style="{ color: '#eb2f96' }">{{text}}</span>
              </template>
            </template>
            <template v-if="column.key === 'sex'">
              <template v-if="text === 'W'">
                <a-tag color="pink">
                  <template #icon>
                    <icon-font type="icon-woman" style="font-size: 20px" />
                  </template>
                  女
                </a-tag>
              </template>
              <template v-if="text === 'M'">
                 <a-tag color="blue">
                  <template #icon>
                    <icon-font type="icon-man" style="font-size: 20px" />
                  </template>
                  男
                </a-tag>
              </template>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="primary" @click="updateRow(record)">
                  <template #icon>
                    <edit-outlined />
                  </template>
                  编辑
                </a-button>
                <a-button type="primary" danger @click="delRow(record)">
                  <template #icon>
                    <delete-outlined />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>

        <a-modal :open="form.visible" :title="form.type=='insert'?'创建用户信息':'编辑用户信息' " @change="form.visible = false" :footer="null" destroyOnClose>
          <formModel :row="form.row" :type="form.type" @success="successForm" />
        </a-modal>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import {
  PlusOutlined,
  AlertFilled,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined
} from "@ant-design/icons-vue";
import { pageList, remove } from "@/api/sysUserApi";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import {} from "vue-router";
import {} from "vuex";
import formModel from "./formModel.vue";
import deptTree from "./deptTree.vue";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "sysRole",
  props: {},
  emits: [],
  setup(props, context) {
    const columns = [
      {
        title: "用户名称",
        dataIndex: "name",
        key: "name",
        width: 150,
        fixed: 'left' 
      },
      {
        title: "登陆账号",
        dataIndex: "account",
        key: "account",
        width: 100
      },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        width: 100
      },
      {
        title: "部门",
        dataIndex: "deptName",
        key: "deptName",
        width: 100
      },
      {
        title: "角色",
        dataIndex: "roleNameStr",
        key: "roleNameStr",
        width: 200
      },
      {
        title: "岗位",
        dataIndex: "jobNameStr",
        key: "jobNameStr",
        width: 200
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
         width: 150
      },
      {
        title: "最后修改时间",
        dataIndex: "updateTime",
        key: "updateTime",
         width: 250
      },
      {
        title: "操作",
        key: "action",
        align: "center",
         width: 200,
         fixed: 'right' 
      }
    ];
    const pagination = {
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      total: 0,
      showTotal: (total, range) => {
        return `${range[0]}-${range[1]} 共 ${total} 条数据`;
      },
      onChange: (page, pageSize) => {
        data.pagination.current = page;
        data.pagination.pageSize = pageSize;
        initPageList();
      }
    };

    const search = {
      name: "",
      account: "",
      deptCodes: ""
    };

    const data = reactive({
      columns,
      pagination,
      search,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
        row: null,
        type: "insert",
        visible: false
      }
    }); //里面写所有的响应式数据，像vue2中的data一样

    // 点击树节点
    let checkTree = checkedKeys => {
      pagination.current = 1;
      search.deptCodes = checkedKeys;
      initPageList();
    };
    // 初始化表格列表
    let initPageList = () => {
      let params = {
        current: pagination.current,
        size: pagination.pageSize,
        name: search.name,
        account: search.account,
        deptCodes: search.deptCodes
      };
      pageList(params).then(resd => {
        data.tableData = resd.records;
        data.pagination.total = resd.total;
      });
    };
    /* 创建全选 */
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      data.form.selectedRowKeys = selectedRowKeys;
      data.form.selectedRows = selectedRows;
    };
    /* 创建数据 */
    let insert = () => {
      data.form.visible = true;
      data.form.type = "insert";
    };
    /* 更新数据 */
    let update = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length != 1) {
        message.warning("编辑操作有且只有选择一行数据");
        return false;
      }
      data.form.row = data.form.selectedRows[0];
      data.form.visible = true;
      data.form.type = "update";
    };
    /* 更新行数据 */
    let updateRow = row => {
      data.form.row = row;
      data.form.visible = true;
      data.form.type = "update";
    };
    /*删除数据 */
    let del = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length == 0) {
        message.warning("删除操作至少选择一行数据");
        return false;
      }
      let params = data.form.selectedRowKeys;
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id];
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };
    // 表单成功回调函数
    let successForm = () => {
      initPageList();
      data.form.visible = false;
    };

    // 检索
    let serch = () => {
      pagination.current = 1;
      initPageList();
    };
    // 页面初始化
    onMounted(() => {
      initPageList(); // 初始化表格
    });

    return {
      ...toRefs(data),
      checkTree,
      onSelectChange,
      insert,
      update,
      updateRow,
      del,
      delRow,
      successForm,
      serch
    };
  },
  components: {
    PlusOutlined,
    formModel,
    deptTree,
    AlertFilled,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined
  }
});
</script>

<style scoped>
.crud,
.search {
  margin-bottom: 10px;
}
</style>